<template>
  <div>
    <h2 style="text-align: center">销售信息查询</h2>
    <el-table :data="cutObj.records" border stripe style="width: 100%">
      <el-table-column prop="client" label="客户名称"  />
      <el-table-column prop="salesman" label="销售员"  />
      <el-table-column prop="sellDate" label="销售时间"  />
      <el-table-column prop="money" label="订单金额"  />
      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <el-button  type="primary" size="small" @click="findSellInfo(scope.row)">查看销售详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="cutObj.current"
        v-model:page-size="cutObj.size"
        background
        layout="prev, pager, next, jumper"
        :total="cutObj.total"
        @current-change="findByItem"
    />

    <el-row>
      <el-col :span="12"></el-col>
      <el-col :span="10" style="margin-top:10px;padding-top:10px;padding-right:50px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);width: 300px;height: 150px;">
        <el-form
            label-width="120px"
            class="demo-ruleForm"
            status-icon
        >
          <el-form-item label="起始日期">
            <el-input v-model="queryObj.startDate" />
          </el-form-item>

          <el-form-item label="结束日期">
            <el-input v-model="queryObj.endDate" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="findByItem(1)">
              <el-icon style="font-size: 20px;padding-right: 10px;"><Search /></el-icon>查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2"></el-col>
    </el-row>


    <!--销售详情对话框-->
    <el-dialog
        v-model="showSellInfo"
        title="销售详细信息"
        width="50%"
    >
      <table width="80%">
        <tr><td>客户名称</td><td>{{sellObj.client}}</td><td>销售员</td><td>{{sellObj.salesman}}</td></tr>
        <tr><td>销售时间</td><td>{{sellObj.sellDate}}</td><td>订单金额</td><td>{{sellObj.money}}</td></tr>
      </table>

      <el-table :data="sellObj.sellInfoList" border stripe style="width: 100%">
        <el-table-column prop="product.name" label="商品名称"  />
        <el-table-column prop="sellMoney" label="成交价"  />
        <el-table-column prop="sellNumber" label="销售数量"  />
      </el-table>

      <template #footer>
      <span class="dialog-footer">
        <el-button type="success" @click="showSellInfo = false">确定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      cutObj:{},//分页查询对象
      queryObj:{},//查询条件对象
      sellObj:{},//销售对象
      showSellInfo:false //是否显示查看详情对话框
    }
  },
  methods:{
    findByItem(pageNO){ //动态条件分页查询销售信息
      this.queryObj.pageNO = pageNO;
      axios.get("/project/sell/findByItem",{params:this.queryObj}).then(resp =>{
        this.cutObj = resp.data;
      })
    },
    findSellInfo(showObj){ //查询销售详情
      axios.get("/project/sell/findById",{
        params:{
          id:showObj.id
        }
      }).then(resp =>{
        this.sellObj = resp.data;
        this.showSellInfo = true;
      })
    }
  },
  created() {
    this.findByItem(1);
  }

}
</script>

<style scoped>

</style>